<script lang="ts" setup>
import { AlertOutlined, ApartmentOutlined, AppstoreOutlined, BookOutlined, DatabaseOutlined, EditOutlined, ExperimentOutlined, HomeOutlined, KeyOutlined, PlusOutlined, ProjectOutlined, ReadOutlined, RobotOutlined, TeamOutlined, TrophyOutlined } from '@ant-design/icons-vue';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { fetchAreaListApi } from '@/api/MicroScene/MicroSceneApi';
import type { Area } from '@/types/micro-scene';

defineProps({
  showDefaultContent: { // 是否显示默认导航栏内容
    type: Boolean,
    default: true,
  },
  showHomeButton: { // 是否显示首页按钮
    type: Boolean,
    default: true,
  },
});

const router = useRouter();
const route = useRoute();

// 专区列表数据
const areaList = ref<Area[]>([]);

// 添加路由映射关系
const menuPathMap: Record<string, string> = {
  '/user/application/dev-space': '/user/application',
  '/user/application/camp1': '/user/application',
};
// 计算当前选中的菜单项
const selectedKeys = computed(() => {
  const currentPath = route.path;
  return [menuPathMap[currentPath] || currentPath];
});
// 路由导航处理
const handleClick = (e: { key: string }) => {
  if (e.key !== route.path)
    router.push(e.key);
};

// 获取专区列表数据
const fetchAreaList = async () => {
  try {
    areaList.value = await fetchAreaListApi();
  }
  catch (error) {
    console.error('获取专区列表失败:', error);
  }
};

onMounted(() => {
  fetchAreaList();
});

const gotoHome = () => {
  router.push('/user/homepagesquare');
};
</script>

<template>
  <div class="flex sidebar-container">
    <a-layout-sider width="16rem" class="sidebar">
      <!-- 顶部内容区域 -->
      <div class="sidebar-header">
        <slot name="logo">
          <div class="flex items-center px-4 pt-4 gap-2 cursor-pointer" @click="gotoHome">
            <img src="@/assets/Logo.svg" alt="logo" class="h-10">
            <img src="@/assets/ProjectName.svg" alt="logo" class="h-8">
          </div>
        </slot>
        <slot name="avatar" />
      </div>

      <!-- 菜单滚动区域 -->
      <div class="menu-container">
        <a-menu mode="inline" :selected-keys="selectedKeys" @click="handleClick">
          <!-- 自定义内容插槽 -->
          <slot name="menu-content">
            <a-menu-item
              key="/user/homepagesquare"
              class="py-6 text-base"
            >
              <template #icon>
                <HomeOutlined style="font-size: 1rem;" />
              </template>
              首页
            </a-menu-item>
            <a-sub-menu class="text-base">
              <template #icon>
                <ExperimentOutlined style="font-size: 1rem;" />
              </template>
              <template #title>
                AI+X专区
              </template>

              <a-menu-item
                v-for="area in areaList"
                :key="`/micro-scene/area/${area.areaId}`"
                class="py-6 text-base"
              >
                <template #icon>
                  <KeyOutlined style="font-size: 1rem;" />
                </template>
                {{ area.areaName }}
              </a-menu-item>

              <!-- <a-menu-item
                key="/micro-scene/detail/001"
                class="py-6 text-base"
              >
                <template #icon>
                  <KeyOutlined style="font-size: 1rem;" />
                </template>
                详情页面直达
              </a-menu-item> -->
            </a-sub-menu>

            <a-sub-menu
              class="text-base"
            >
              <template #icon>
                <BookOutlined style="font-size: 1rem;" />
              </template>
              <template #title>
                学习广场
              </template>

              <a-menu-item
                key="/user/learningNew/skill-tree"
                class="py-6 text-base"
              >
                <template #icon>
                  <ApartmentOutlined style="font-size: 1rem;" />
                </template>
                技能树
              </a-menu-item>

              <a-menu-item
                key="/user/learningNew/course"
                class="py-6 text-base"
              >
                <template #icon>
                  <ReadOutlined style="font-size: 1rem;" />
                </template>
                课程
              </a-menu-item>
            </a-sub-menu>
            <a-menu-item
              key="/user/practice"
              class="py-6 text-base"
            >
              <template #icon>
                <EditOutlined style="font-size: 1rem;" />
              </template>
              实训广场
            </a-menu-item>
          </slot>
        </a-menu>
      </div>
    </a-layout-sider>

    <!-- 引用拟态框组件 -->
    <CreateAgentModal ref="modalRef" />
  </div>
</template>

<style lang="scss" scoped>
@use '@/style/custom-theme.scss' as *;

.sidebar-container {
  height: 100vh;
  overflow: hidden;

  :deep(.ant-layout-sider) {
    height: 100vh;
    overflow: hidden;
  }

  :deep(.ant-layout-sider-children) {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

.sidebar {
  background-color: #ffffff;
  height: 100%;
  display: flex;
  flex-direction: column;

  .sidebar-header {
    flex-shrink: 0;
  }

  .menu-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;

    :deep(.ant-menu) {
      height: 100%;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #d9d9d9;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background-color: #f0f0f0;
    }
  }

  .menu-icon {
    width: 1.2rem;
    height: 1.3rem;
    margin-right: 0.625rem;
    vertical-align: middle;
  }
  .icon-culture {
    font-size: 1.25rem;
    margin-right: 0.35rem;
    color: rgb(173, 29, 21);
  }
  .ant-menu-item {
    padding-left: 1.5rem !important;
    color: #4f4f4f;
  }

  .ant-menu-item:hover {
    color: #4f4f4f;
  }

  .ant-menu-item-selected {
    background-color: #f3f5f8 !important;
    color: #000 !important;
  }

  .ant-menu-submenu-title {
    padding-left: 1.5rem !important;
    color: #4f4f4f;
  }

  .ant-menu-submenu-title:hover {
    color: #4f4f4f;
  }

  .ant-menu-submenu-arrow {
    color: rgba(0, 0, 0, 0.65);
  }
}
</style>
